<script lang="ts" setup>
    const value1 = ref<number>(10);
    const value2 = ref<number>(10);

</script>

<template>
    <!-- 滑块 -->
    <u-layout
        :enable-refresh="false"
        title="滑块组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <view class="line">
                <u-text text="基础功能" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-slider
                                v-model:value="value1"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义返回（0-50）" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-slider
                                v-model:value="value2"
                                :min="0"
                                :max="50"
                                :show-value="true"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="指定步长" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-slider
                                v-model:value="value1"
                                :step="5"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义样式" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-slider
                                v-model:value="value1"
                                block-color="#ff0000"
                                active-color="#ff0000"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="禁用" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-slider
                                v-model:value="value1"
                                :disabled="true"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- //容器 -->
    </u-layout>
    <!-- //滑块 -->
</template>

<style lang="scss" scoped>
    // 容器
    .container
    {
        .line
        {
            .title
            {
                font-size: 14px;
                line-height: 20px;
            }

            .block
            {
                overflow: hidden;
                margin-top: 4px;
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }
</style>